import React from 'react';
import axios from 'axios';
import { useState, useEffect } from 'react';
const Fatherdemo = () => {
    const [scholllist, setschoollist] = useState([]);
    const [count, setCount] = useState(0)
    // 案例1: 写数据请求
    // 如下写法初始化只执行一次
    // useEffect(() => {
    //     axios.get('https://api.i-lynn.cn/college').then(res => {
    //         console.log(res);
    //         setschoollist(res.data.data.list1)
    //     })
    // }, [])

    // 案例2: 希望绑定事件给document
    const handleClick = () => {
        console.log('button');
    }
    // 默认 执行绑定一次,当组件中的数据变化时, 在执行一次, 
    useEffect(() => {
        console.log('事件绑定次数');
        // 默认执行数据更新执行
        document.querySelector('button').addEventListener('click', handleClick)
        // 解决方式1: 使用dom0级事件绑定
        // document.querySelector('button').onclick = handleClick

        // 解决方式2: 添加闭包函数, 当数据更新的时候, 先执行闭包函数清除了事件,再执行事件绑定,这样事件最终一次

        // 解决方式3: 使用参数2为空数组,意味着没有要监听的数据,也就是监听的数据没有变化,则只执行一次
        return () => {
            document.querySelector('button').removeEventListener('click', handleClick)
        }
    })

    return (
        <div>
            {/* {
                scholllist.map(item => <p key={item.id}>{item.school_name}</p>)
            } */}
            <p onClick={() => {
                setCount(count + 1)
            }}>count:{count}</p>
            <p><button>点击事件</button></p>

        </div>
    );
}

export default Fatherdemo;
